<template>
  <div class="min-h-screen bg-gradient-to-b from-blue-50 to-white flex items-center justify-center px-4 py-12">
    <div class="w-full max-w-md">
      <!-- Logo -->
      <div class="text-center mb-8">
        <h1 class="text-4xl font-bold text-blue-500 mb-2">智笔</h1>
        <p class="text-gray-600">你的专属作文辅导老师</p>
      </div>

      <!-- 注册表单卡片 -->
      <div class="bg-white rounded-xl shadow-sm p-8">
        <AuthForm
          mode="register"
          :loading="loading"
          :error="error"
          @submit="handleRegister"
          @toggle-mode="goToLogin"
        />
      </div>

      <!-- 底部说明 -->
      <p class="text-center text-sm text-gray-500 mt-6">
        注册即表示您同意我们的
        <a href="#" class="text-blue-500 hover:text-blue-600">服务条款</a>
        和
        <a href="#" class="text-blue-500 hover:text-blue-600">隐私政策</a>
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores/user';
import AuthForm from '../components/AuthForm.vue';

const router = useRouter();
const userStore = useUserStore();

const loading = ref(false);
const error = ref('');

/**
 * 处理注册
 */
const handleRegister = async (registerData) => {
  loading.value = true;
  error.value = '';

  try {
    await userStore.register(registerData);

    // 注册成功，重定向到首页
    console.log('[RegisterPage] Registration successful, redirecting to home');
    router.push('/');
  } catch (err) {
    console.error('[RegisterPage] Registration failed:', err);
    error.value = err.message || '注册失败，请稍后再试';
  } finally {
    loading.value = false;
  }
};

/**
 * 跳转到登录页
 */
const goToLogin = () => {
  router.push('/login');
};
</script>

<style scoped>
/* 无需额外样式，全部使用TailwindCSS */
</style>

